<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .table-container {
            align-items: center;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            max-height: 900px;
            overflow-y: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        #modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
        }
        #modal-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
    </style>
    <script>
        function showModal(result) {
            document.getElementById('modal-text').innerText = JSON.stringify(result, null, 2);
            document.getElementById('modal').style.display = 'block';
        }

        function closeModal() {
            document.getElementById('modal').style.display = 'none';
        }
        function autoRefresh() {
            setTimeout(function() {
                location.reload();
            }, 10000); // 10000 milliseconds = 10 seconds
        }

        // Call the autoRefresh function when the page loads
        window.onload = autoRefresh;
    </script>
</head>
<body>
    <div class="table-container">
        <h1>推荐单</h1>
        <br/>
        <div>
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>Name</th>
                        <th>Code</th>
                        <th>状态</th>
                        <th>操作建议</th>
                    </tr>
                </thead>
                <tbody>
                    {% set index = 1 %}
                    {% for item in tickers %}
                    <tr>
                        <td>{{ index }}</td>
                        <td>{{ item['name'] }}</td>
                        <td>{{ item['code'] }}</td>
                        <td>{{ item['status'] }}</td>
                        <td onclick="showModal({{ item['result'] }})" style="cursor: pointer;">{{ item['action'] }}</td>
                    </tr>
                    {% set index = index + 1 %}
                    {% end %}
                </tbody>
            </table>     
        </div>
    </div>
    <div id="modal" style="display:none;">
        <div id="modal-content">
            <span onclick="closeModal()" style="float:right;cursor:pointer;">&times;</span>
            <p id="modal-text"></p>
        </div>
    </div>
</body>
</html>